<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>欢迎使用panopro</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../plug-unit/layui/css/layui.css"  media="all">
  <script src="../plug-unit/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<ul class="layui-nav layui-nav-tree layui-nav-side">
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">导航菜单</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;" class="site-demo-active" data-type="panoList">全景列表</a></dd>
      <dd><a href="javascript:;" class="site-demo-active" data-type="resourceList">资源文件</a></dd>
    </dl>
  </li>
</ul>
<div class="layui-tab layui-tab-brief" lay-filter="tabBrief" style="margin-left:200px">
  <ul class="layui-tab-title"></ul>
  <div class="layui-tab-content"></div>
</div>

<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element(); //导航的hover效果、二级菜单等功能，需要依赖element模块
  
  var active = {
	 panoList: function(){
		 if($('li[lay-id="panoList"]').length==0){
			 element.tabAdd('tabBrief', {
		        title: '全景列表'
		        ,content: '<iframe width="100%" height="'+($(window).height()-200)+'px" scrolling="auto"  border=0  marginwidth="0" marginheight="0" frameborder="0" application=yes  style="margin-top:0px;margin-left:0px;margin-right:0px" src="html/panoList.html"></iframe>'
		        ,id: 'panoList'
		      });
		 }
		 element.tabChange('tabBrief', 'panoList');
    },
    resourceList:function(){
    	if($('li[lay-id="resourceList"]').length==0){
			 element.tabAdd('tabBrief', {
		        title: '资源文件'
		        ,content: '<iframe width="100%" height="'+($(window).height()-200)+'px" scrolling="auto"  border=0  marginwidth="0" marginheight="0" frameborder="0" application=yes  style="margin-top:0px;margin-left:0px;margin-right:0px" src="html/resourceList.html"></iframe>'
		        ,id: 'resourceList'
		      });
		 }
    	element.tabChange('tabBrief', 'resourceList');
    }
  };
  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
</script>
</body>
</html>